<template>
<div>
	<!--头部-->
	<div class="bian-top">
		<a href="#/XiuLianMiJi"><img class="bian-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="bian-pin">女汉纸到女神的蜕变</span>
		<a><img class="bian-fan" src="../assets/img/duanhuowang/fan.png" alt=""/></a>
	</div>
	<!--女神女汉纸的一步两步-->
	<div id="bian" class="bian-tu">
		<a href="#/XiuLianXiangQing"><img class="bian-nvs" src="../assets/img/shouye/xiulian/ nushen.png" alt=""/></a>
		<img class="bian-acd" src="../assets/img/shouye/xiulian/ACDICT.png" alt=""/>
		<img class="bian-shenzi" src="../assets/img/shouye/xiaoxi/nvzi.png" alt=""/>
	</div>
	<!--字体描述-->
	<div class="nvwen">
	<img class="nvtu" src="../assets/img/shouye/pinpai/addd.png" alt=""/>
	<p class="wen1">ADDICTION专为追求自我风格的各年龄层女性而设，由<span class="nars">NARS的前彩妆总监Ayako掌舵。</span></p>
    <p class="wen2">每件单品都以崭新的色彩和CHIC的包装呈现，质感奢华，宛如定制。</p>
    <p class="wen3">上市以来已获得35项彩妆奖项，是日本杂志和化妆师力荐品牌。</p>
	</div>
	<!--魅力单色眼影-->
	<div class="meili">
		<img class="meiy" src="../assets/img/shouye/xiulian/yan2.png" alt=""/>
		<img class="yingzi" src="../assets/img/shouye/xiaoxi/yany.png" alt=""/>
		<p class="meizi"><span class="danse">ADDICTION单色眼影@cosme 2016综合大赏、2016眼影部门第1位。</span>一直是超热产品，色卡图案简直是看得人眼花缭乱，但是却没有一款是多余的。色彩饱和度高，易上色，在肌肤上显色鲜亮饱满。粉质软弱易晕染，颜色均匀不结块。可以自由组合配色初化眼影的人参考官网的专业配色也可以轻松驾驭。</p>
	</div>
	<!--腮红&高光-->
	<div class="meili2">
		<img class="meiy" src="../assets/img/shouye/xiulian/sai.png" alt=""/>
		<img class="yingzi" src="../assets/img/shouye/xiaoxi/saih.png" alt=""/>
		<p class="meizi"><span class="danse">日本商场销售冠军和杂志排名第一</span>,也被博主们称为<span class="danse">“少女粉脸颊立马拥有”</span>的液体腮红。质地非常水润，延展性非常好，不会留印，妆感自然。先上粉饼再用这款腮红，d底妆和颊彩依然能均匀融合。皮肤透出来的感觉，到晚上也不会暗沉变色。</p>
	</div>
	<!--化妆品单品-->
	<div v-for="hh in 10" class="hua">
	<!--眼影-->
	<div class="huadan">
		<img class="ldant" src="../assets/img/shouye/xiulian/meili.png" alt=""/>
		<div class="rdant">
			<p class="danb">ADDDICTION  魅力单色眼影</p>
			<p>
				<span class="dmony">￥29.9</span>
				<span class="dqia">立即抢购</span>
			</p>
		</div>
	</div>
	<!--晒红-->
	<div class="huadan">
		<img class="ldant" src="../assets/img/shouye/xiulian/yeti.png" alt=""/>
		<div class="rdant">
			<p class="danb2">ADDDICTION  液体腮红&高光<br/>12ml</p>
			<p>
				<span class="dmony">￥29.9</span>
				<span class="dqia">立即抢购</span>
			</p>
		</div>
	</div>
	</div>
	<!--点击回到顶部-->
		<a href="#bian">
			<div class="bian-box">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="bian-ding">返回顶部</p>
			</div>
		</a>
		<!--加载更多-->
		<p class="huaj">加载更多</p>
</div>
</template>

<script>
</script>

<style>
	/*头部*/
	.bian-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	
	.bian-pin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 12rem;
		font-weight: 200;
	}
	
	.bian-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.bian-fan {
		width: 3.6rem;
		height: 3.4rem;
	}
	/*返回顶部*/
	.bian-box{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.bian-box>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.bian-ding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
	/*图图图*/
	.bian-tu{
		width: 100%;
		height: 40rem;
		background: lightgoldenrodyellow;
		position: relative;
		margin-top: 9.6rem;
	}
	.bian-nvs{
		width: 100%;
		height: 100%;
		position: absolute;
		top:0;
	}
	.bian-acd{
		width: 31.2rem;
		height: 7.8rem;
		position: absolute;
		right: 2rem;
		bottom: 15rem;
	}
	.bian-shenzi{
		width: 68rem;
		height: 8.2rem;
		position: absolute;
		left:2.1rem;
		bottom: 2.4rem;
	}
	/*文字描述*/
	.nvwen{
		height: 36rem;
		background: #FFFFFF;
		text-align: center;
		font-size: 2.8rem;
		color:#4D4D4D;
		padding:3rem;
	}
	.nvtu{
		width: 26.1rem;
		padding: 3rem;
	}
	.wen2{
		width: 59rem;
		padding-left:5rem;
	}
	.wen3{
		width: 40rem;
		padding-left: 14rem;
	}
	.nars{
		color:#333333;
	}
	/*魅力单色眼影*/
	.meili,.meili2{
		width: 100%;
		background: #FFFFFF;
		margin: 2rem auto 0;
		text-align: center;
		padding-top: 1rem;
	}
	.meili{
		height: 77rem;
	}
	.meili2{
		height: 73.2rem;
		margin-bottom: 2rem;
	}
	.meiy{
		width: 68rem;
		font-size: 0;
	}
	.yingzi{
		width: 68rem;
		height: 8rem;
	}
	.meizi{
		background: #F2F2F2;
		margin:auto;
		padding:1rem;
		font-size: 2.8rem;
		color:#4D4D4D;
		text-align: left;
		width: 64.4rem;
	}
	.danse{
		font-size: 3rem;
		color:#F8545F;
	}
	/*化妆品单品*/
	.huadan{
		width: 100%;
		height: 16rem;
		padding:2rem;
		background: #FFFFFF;
		border-bottom: 0.1rem  solid #CCCCCC;
	}
	.ldant{
		width: 18rem;
		height: 16rem;
		float: left;
		padding-right: 2rem;
	}
	.danb,.danb2{
		font-size: 2.8rem;	
		color:#4D4D4D;
	}
	.danb{
		padding-bottom: 6rem;
	}
	.danb2{
		padding-bottom: 3rem;
	}
	.dmony{
		font-size: 2.8rem;
		color:#F8545F;
		padding-right:25rem;
	}
	.dqia{
		display: inline-block;
		width: 12rem;
		height: 4rem;
		background: #FF0000;
		border-radius: 2rem;
		color:#FFFFFF;
		font-size: 1.8rem;
		text-align: center;
		line-height: 4rem;
	}
	/*加载更多*/
	.huaj{
		width: 100%;
		height: 6rem;
		font-size: 2.4rem;
		text-align: center;
		line-height: 6rem;
		color:#808080;
	}
</style>